<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form demo</title>

<link rel="stylesheet" type="text/css" href="../theme-remote-1.5.0.css" />
<style type="text/css">
body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#debugPanel pre {
    font-family: "Lucida Console", "Courier New", Courier, monospace;
}

div.container {
    border: 0px solid green;
    margin: 10px;
}
</style>

<script type="text/javascript">
var djConfig = {
    isDebug: true,
    parseOnLoad: true,
    locale: "zh",
    extraLocale: ["en"],
    baseUrl: "../lib/dojo-1.5.0/dojo/",
    modulePaths: {
        "demo": "../../../script/demo",
        "com": "../../../script/com"
    }
};
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js.uncompressed.js"></script>
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.date.locale");
    dojo.require("dojo.parser");

    dojo.require("dijit.dijit"); // optimize: load dijit layer
    dojo.require("dijit.ColorPalette");
    dojo.require("dijit.Dialog");
    dojo.require("dijit.form.CheckBox");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.DropDownButton");
    dojo.require("dijit.form.FilteringSelect");
    dojo.require("dijit.form.Form");
    dojo.require("dijit.form.NumberSpinner");
    dojo.require("dijit.form.NumberTextBox");
    dojo.require("dijit.form.RadioButton");
    dojo.require("dijit.form.SimpleTextarea");
    dojo.require("dijit.form.Textarea");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.form.ValidationTextBox");
    dojo.require("dijit.InlineEditBox");
    dojo.require("dijit.Menu");
    dojo.require("dijit.TitlePane");
    dojo.require("dijit.TooltipDialog");

    dojo.require("dojox.data.AndOrWriteStore");
    dojo.require("dojox.html.entities");
    dojo.require("dojox.layout.FloatingPane");
    dojo.require("dojox.layout.ResizeHandle");
    dojo.require("dojox.validate");
    dojo.require("dojox.validate.web");
    dojo.require("dojox.widget.Standby");
    dojo.require("dojox.widget.Toaster");
</script>
<script type="text/javascript" src="../script/utils.js"></script>
<script type="text/javascript">
function debug(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);
    console.debug(msg);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML = msg;
}

function append(messages) {
    var msg = demo.utils._getDebugMsg.apply(null, arguments);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML += "\n" + msg;
}

function show(id) {
    demo.utils.show(id);
}

function hide(id) {
    demo.utils.hide(id);
}
</script>
<style type="text/css">
@import "../css/rounded-button.css";
@import "../css/rounded-corners.css";

body {
    padding: 10px;
}

/* Override Toaster text style */
.dijitToasterContainer {
    font-size: 1em;
}

#tipMessage {
    max-width: 50%;
    border: 1px solid red;
    opacity: 0; /* initially hidden */
}

#tipMessageContent {
    background: #FFF0A8;
    padding: 1px 15px;
}
</style>
<script type="text/javascript">
if (("demo" in dojo.global) === false) {
    var demo = {};
}

demo.form = {};
demo.form.tipMessage = null;

//////////////////////////////
dojo.addOnLoad(function() {
    debug("loaded");

    demo.form.tipMessage = new dojo.fx.Toggler({
        node: "tipMessage"
    });
});

//////////////////////////////
function submitParentWidget(widget, e) {
    // find parent dialog
    var dialog = null;
    for (var node = widget.domNode.parentNode; node.parentNode; node = node.parentNode) {
        var parentWidget = dijit.byNode(node);
        if (parentWidget && typeof parentWidget._onSubmit === "function") {
            dialog = parentWidget;
            break;
        }
    }

    if (dialog) {
        dialog._onSubmit(e);
    }
}

function createFormForDropDownButton(buttonId) {
    dijit.byId("createFormButton").set("disabled", true);
    var button = dijit.byId(buttonId);
    var dialog = button.dropDown;
    createForm(dialog.containerNode);
}

function createForm(containerNode) {
    var formId = "progForm";
    var form = dijit.byId(formId);
    if (!form) {
        // create form
        form = new dijit.form.Form({
            id: formId,
            onSubmit: function(e) {
                var submitButton = dijit.byId("addButton_" + formId);
                if (this.isValid() === true && submitButton.get("disabled") === false) {
                    submitButton.set("disabled", true);
                    var def = showTipMessage("submit");
                    def.addCallback(function() {
                        showToasterMessage("submit");
                    });
                    submitParentWidget(this, e);
                }

                return false;
            },
            onReset: function(e) {
                var def = showTipMessage("reset");
                def.addCallback(function() {
                    showToasterMessage("reset");
                });
                var submitButton = dijit.byId("addButton_" + formId);
                submitButton.set("disabled", false);
            }
        });
        dojo.place(form.domNode, containerNode);
    }
    dojo.place("<hr />", form.containerNode);

    // textbox
    var selector = new dijit.form.TextBox({
        id: "name_" + formId,
        name: "name",
        trim: true,
        style: "width: 250px"
    });
    dojo.place(selector.domNode, form.containerNode);

    // selector
    var store = new dojo.data.ItemFileReadStore({
        url: "../data/countries.json"
    });
    var selector = new dijit.form.FilteringSelect({
        id: "option_" + formId,
        name: "option",
        store: store,
        searchAttr: "name",
        trim: true,
        style: "width: 250px"
    });
    dojo.place(selector.domNode, form.containerNode);
    dojo.connect(selector, "_onKeyPress", function(evt) {
        var key = evt.charOrCode;
        if (key === dojo.keys.ENTER) {
            console.debug("capture ENTER key");
            submitParentWidget(this, evt);
        }
    });

    // add button
    var addButton = new dijit.form.Button({
        id: "addButton_" + formId,
        type: "submit",
        label: "Add"
    });
    dojo.place(addButton.domNode, form.containerNode);

    // refresh button
    var refreshButton = new dijit.form.Button({
        id: "refreshButton_" + formId,
        type: "reset",
        label: "Refresh list"
    });
    dojo.place(refreshButton.domNode, form.containerNode);
}

function onEnterKeyUp(e) {
    var key = e.keyCode;
    if (key === dojo.keys.ENTER) {
        console.debug("capture ENTER key");
        submitParentWidget(this, e);
    }
}

function showToasterMessage(msg) {
    var params = {};
    params.message = msg;
    //params.type = "warning";
    //params.duration = 2000;

    dojo.publish("toasterMessageTopic", [params]);
}

function showTipMessage(msg) {
    var def = new dojo.Deferred();
    dojo.byId("tipMessageContent").innerHTML = msg;

    var tipMessage = demo.form.tipMessage;

    // callback when animation ends
    tipMessage.hideAnim.onEnd = function() {
        def.callback();
    };

    tipMessage.show();
    setTimeout(function() {
        tipMessage.hide();
    }, 1000);

    return def;
}
</script>
</head>
<body class="claro">

  <div id="main" class="container">

    <div id="titlePanel" dojoType="dijit.TitlePane" title="Panel" style="">
      <div id="resizablePanel" style="position:relative; padding: 10px; border:1px solid black;">

        <!-- Content -->
        <div class="content">
          <!-- tip message -->
          <div style="position: relative; width: 20em; height: 5em;">
            <div id="tipMessage" style="position:absolute;top:0;right:0;">
              <div id="tipMessageContent">this is the tip message</div>
            </div>
          </div>

          <h3>HTML form</h3>
          <form id="htmlForm" action="" method="post">
            <fieldset>
              <legend>Personal information:</legend>
              <label for="name_htmlForm">Name:</label><input id="name_htmlForm" name="name" value="" />
              <br />
              <label for="selector_htmlForm">Number:</label>
              <select id="selector_htmlForm" name="combo">
                <option value="one">one</option>
                <option value="two">two</option>
                <option value="three">three</option>
              </select>
              <br />
              <input id="male_htmlForm" type="radio" name="genre" value="male" /><label for="male_htmlForm">Male</label>
              <input id="female_htmlForm" type="radio" name="genre" value="female" /><label for="female_htmlForm">Female</label>
              <br />
              <input id="submit_htmlForm" type="submit" value="Submit" />
              <input id="reset_htmlForm" type="reset" value="Reset" />
            </fieldset>
          </form>
          <script type="text/javascript">
          dojo.addOnLoad(function() {
              dojo.connect(dojo.byId("htmlForm"), "onsubmit", function(e) {
                  var submitButton = dojo.byId("submit_htmlForm");
                  if (submitButton.disabled === false) {
                      submitButton.disabled = true;
                      var def = showTipMessage("submit");
                      def.addCallback(function() {
                          showToasterMessage("submit");
                      });
                  }

                  // stop submission
                  dojo.stopEvent(e);
              });

              dojo.connect(dojo.byId("htmlForm"), "onreset", function(e) {
                  var def = showTipMessage("reset");
                  def.addCallback(function() {
                      showToasterMessage("reset");
                  });
                  var submitButton = dojo.byId("submit_htmlForm");
                  submitButton.disabled = false;
              });
          });
          </script>

          <h3>dijit form</h3>
          <div dojoType="dijit.form.Form" id="dijitForm" jsId="dijitForm" encType="multipart/form-data" action="" method="post">
            <table style="border: 1px solid #9f9f9f;" cellspacing="10">
              <tr>
                <td><label for="name">Name:</label></td>
                <td><input type="text" id="name" name="name" required="true" placeholder="Your Name" dojoType="dijit.form.ValidationTextBox" missingMessage="Ooops! You forgot your first name!" /></td>
              </tr>
              <tr>
                <td><label for="dob">Date:</label></td>
                <td><input type="text" id="dob" name="dob" dojoType="dijit.form.DateTextBox" /></td>
              </tr>
              <tr>
                <td><label>Genre:</label></td>
                <td>
                  <input id="male" type="radio" dojoType="dijit.form.RadioButton" name="genre" value="male" /><label for="male">Male</label>
                  <input id="female" type="radio" dojoType="dijit.form.RadioButton" name="genre" value="female" /><label for="female">Female</label>
                </td>
              </tr>
            </table>
            <button dojoType="dijit.form.Button" type="button" onClick="console.log(dijitForm.getValues())">Get Values from form!</button>
            <button id="submitButton" dojoType="dijit.form.Button" type="submit">Submit</button>
            <script type="dojo/method" event="onSubmit" args="e">
                var submitButton = dijit.byId("submitButton");
                if (this.isValid() === true && submitButton.get("disabled") === false) {
                    submitButton.set("disabled", true);
                    var def = showTipMessage("submit");
                    def.addCallback(function() {
                        showToasterMessage("submit");
                    });
                }

                return false;
            </script>
            <button dojoType="dijit.form.Button" type="reset">Reset</button>
            <script type="dojo/method" event="onReset" args="e">
                var def = showTipMessage("reset");
                def.addCallback(function() {
                    showToasterMessage("reset");
                });
                var submitButton = dijit.byId("submitButton");
                submitButton.set("disabled", false);
            </script>
          </div>
        </div>

        <!-- Resize Handle -->
        <div id="resizeHandle" dojoType="dojox.layout.ResizeHandle" targetId="resizablePanel"></div>
      </div>
    </div>

    <!-- Button Panel -->
    <div dojoType="dojo.dnd.Moveable">
      <div id="buttonPanel" dojoType="dijit.TitlePane" title="Button Panel" style="">
        <!-- Button -->
        <button dojoType="dijit.form.Button" title="Click to show popup dialog" onClick="dijit.byId('dialog').show();">Show Popup</button>

        <!-- DropDown Button with Form -->
        <button dojoType="dijit.form.DropDownButton" title="Click to show TooltipDialog">
          <span>DropDownButton with Form</span>
          <!-- TooltipDialog -->
          <div dojoType="dijit.TooltipDialog">
            <div dojoType="dijit.form.Form" id="tooltipForm" method="post">
              <label for="nameTextBox">Name:</label> <input dojoType="dijit.form.TextBox" id="nameTextBox" name="name" />
              <label for="selector">Combo:</label>
              <select id="selector" name="option" dojoType="dijit.form.ComboBox">
                <option value="one">one</option>
                <option value="two">two</option>
                <option value="three">three</option>
                <script type="dojo/connect" event="_onKeyPress" args="evt">
                    var key = evt.charOrCode;
                    if (key === dojo.keys.ENTER) {
                        console.debug("capture ENTER key");
                        submitParentWidget(this, evt);
                    }
                </script>
              </select>
              <span id="saveButton" dojoType="dijit.form.Button" type="submit" title="Save">Save</span>
              <script type="dojo/method" event="onSubmit" args="e">
                  var submitButton = dijit.byId("saveButton");
                  if (this.isValid() === true && submitButton.get("disabled") === false) {
                      submitButton.set("disabled", true);
                      var def = showTipMessage("submit");
                      def.addCallback(function() {
                          showToasterMessage("submit");
                      });
                  }

                  return false;
              </script>
              <script type="dojo/method" event="onReset" args="e">
                  var def = showTipMessage("reset");
                  def.addCallback(function() {
                      showToasterMessage("reset");
                  });
                  var submitButton = dijit.byId("saveButton");
                  submitButton.set("disabled", false);
              </script>
            </div>
            <script type="dojo/method" event="execute" args="formContents">
                console.debug("formContents", formContents);
                var name = formContents["name"];
                var option = formContents["option"];
                debug("name:", name);
                append("option:", option);
            </script>
          </div>
        </button>

        <!-- DropDown Button with Form -->
        <button id="dropDownButton" dojoType="dijit.form.DropDownButton" title="Click to show TooltipDialog">
          <span>DropDownButton with Form programmatically</span>
          <!-- TooltipDialog -->
          <div dojoType="dijit.TooltipDialog">
            <script type="dojo/method" event="execute" args="formContents">
                console.debug("formContents", formContents);
                var name = formContents["name"];
                var option = formContents["option"];
                debug("name:", name);
                append("option:", option);
            </script>
            <!-- Button -->
            <span id="createFormButton" dojoType="dijit.form.Button" title="Click to create a form" onClick="createFormForDropDownButton('dropDownButton');">Create Form</span>
          </div>
        </button>

        <!-- DropDown Button with TooltipDialog -->
        <button dojoType="dijit.form.DropDownButton" title="Click to show TooltipDialog">
          <span>DropDownButton with TooltipDialog</span>
          <!-- TooltipDialog -->
          <div dojoType="dijit.TooltipDialog">
            <label for="nameTextBox2">Name:</label> <input dojoType="dijit.form.TextBox" id="nameTextBox2" name="name" />
            <span id="saveButton2" dojoType="dijit.form.Button" type="submit" title="Save">Save
              <script type="dojo/method" event="onClick">
                var nameWidget = dijit.byId("nameTextBox2");
                var name = nameWidget.get("value");
                debug("name:", name);
              </script>
            </span>
          </div>
        </button>

        <button dojoType="dijit.form.DropDownButton" title="Click to show Menu">
          <span>DropDownButton with Menu</span>
          <!-- Menu -->
          <div dojoType="dijit.Menu" id="menu" style="display: none;">
            <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut" onClick="alert('Cut!')">Cut</div>
            <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy" onClick="alert('Copy!')">Copy</div>
            <div dojoType="dijit.MenuSeparator"></div>
            <div dojoType="dijit.PopupMenuItem">
              <span>Popup ColorPalette</span>
              <div dojoType="dijit.ColorPalette"></div>
            </div>
          </div>
        </button>
      </div>
    </div>
  </div>

  <!-- Debug Panel -->
  <div id="debugPanel" dojoType="dojox.layout.FloatingPane" title="Console" resizable="true" dockable="true" style="position: absolute; bottom: 20px; right: 20px; width: 500px; height: 150px;">
    <pre id="debugPanelContent"></pre>
  </div>

  <div id="instruction_1" dojoType="dojox.layout.FloatingPane" title="Help" resizable="true" dockable="true" style="position: absolute; top: 20px; right: 20px; width: 300px;">
    Note: IE7 will focus on the submit button when press ENTER key on a dijit Form.<br />
    see dijit/form/Button.js line 67:
    <pre>
_onButtonClick: function(/*Event*/ e){
    // summary:
    //        Handler when the user activates the button portion.
    if(this._onClick(e) === false){ // returning nothing is same as true
        e.preventDefault(); // needed for checkbox
    }else if(this.type == "submit" && !this.focusNode.form){ // see if a nonform widget needs to be signalled
        for(var node=this.domNode; node.parentNode/*#5935*/; node=node.parentNode){
            var widget=dijit.byNode(node);
            if(widget && typeof widget._onSubmit == "function"){
                widget._onSubmit(e);
                break;
            }
        }
    }
},
    </pre>
  </div>

  <!-- Popup Dialog -->
  <div dojoType="dijit.Dialog" id="dialog" title="Dialog" style="display: none;">
    <button id="okButton" dojoType="dijit.form.Button" title="OK"  onClick="alert('OK!');">OK</button>
    <button id="cancelButton" dojoType="dijit.form.Button" title="Cancel" onClick="dijit.byId('dialog').hide();">Cancel</button>
  </div>

  <!-- Toaster -->
  <div dojoType="dojox.widget.Toaster" id="toaster" positionDirection="br-up" messageTopic="toasterMessageTopic"></div>
</body>
</html>
